<script setup>
  import { onMounted, ref } from 'vue'
  import playImg from '@/assets/playing.png'
  import pauseImg from '@/assets/pause.png'
  import src from '@/assets/music.mp3'
  const isPlaying = ref(false) 

 
  const playOrPause = () => {
    if(isPlaying.value){
      //audio.pause()
      isPlaying.value = false
    }else{
      //audio.play()
      isPlaying.value = true
    }
  }
const musicBtn = ref(null)
console.log(musicBtn)
const musicName = ref('音乐名称')
onMounted(() => {
  musicName.value = '难念的经'
})
</script>
 <template>
    <div class="music-audio">
        <audio :src="src" style="display:none"></audio>
        <div class="music-btn" @click="playOrPause">
            <img :src="isPlaying? pauseImg : playImg" />
        </div>
        <div class="music-name">{{ musicName.value }}</div>
        <div class="music-time">00:00</div>
        
        <div class="music-progress">
            <div class="music-progress-bar"></div>
        </div>
    </div>
 </template> 
 <style scoped>
   .music-audio{
       width: 500px;
       height: 100px;
       display: flex;
       justify-content: center;
       align-items: center;
       background-color: #eee;
    }
    .music-btn{
        width: 50px;
        height: 50px;
        border-radius: 50%;
        background-color: #fff;
        cursor: pointer;
    }
    .music-btn img{
        width: 30px;
        height: 30px;
        margin: 10px;
    }
    .music-name{
        font-size: 16px;
        margin-left: 10px;
    }
    .music-time{
        font-size: 14px;
        margin-left: 10px;
    }
    .music-progress{
        width: 300px;
        height: 10px;
        background-color: #ccc;
        position: relative;
    }
    .music-progress-bar{
        height: 100%;
        background-color: #f00;
        position: absolute;
        left: 0;
        top: 0;
    }
</style>